<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" href="../css/aui.css" />
		<link rel="stylesheet" href="../css/mui.css" />
		<link rel="stylesheet" href="../css/public-head.css" />
		<link rel="stylesheet" type="text/css" href="../css/CustomService.css"/>
		<style>
			/*html,
			body {
				background-color: #EEEEEE;
			}

			.Zhangice {
				padding-left: 15px;
				padding-right: 15px;
			}*/
			/*时间*/

			/*.list-date {
				text-align: center;
				margin: 20px 0px 10px;
			}

			.list-date-msg {
				background-color: #CACACA;
				border-radius: 21px;
				color: #FFFEFE;
				font-size: 11px;
				padding: 1px 10px;
			}*/
			/*字体调整*/

			/*.aui-chat .aui-chat-content {
				color: #212121;
				font-size: 14px;
				border-radius: 0.2rem;
				min-height: 2rem;
				position: relative;
				padding: 0.5rem;
				max-width: 80%;
				word-break: break-all;
				word-wrap: break-word;
			}*/
			/*图片*/

			/*.aui-chat .aui-chat-media img {
				width: 0.91rem;
				border-radius: 50%;
			}*/
			/*头像外层*/

			/*.aui-chat .aui-chat-right .aui-chat-media {
				width: 1rem;
				float: right;
			}

			.aui-chat .aui-chat-media {
				display: inline-block;
				max-width: 1rem;
			}*/
			/*去掉padding*/

			/*.aui-chat {
				width: 100%;
				height: 100%;
				padding: 0rem;
			}*/
			/*客服聊天框调整*/

			/*.aui-chat .aui-chat-left .aui-chat-content {
				background-color: #FFFFFF;
				float: left;
				left: 0.5rem;
			}

			.aui-chat .aui-chat-right .aui-chat-content {
				background-color: #0A5AFA;
			}

			.aui-chat .aui-chat-content {
				color: #212121;
				font-size: 14px;
				border-radius: 0.2rem;
				min-height: 2rem;
				position: relative;
				padding: 0.5rem;
				max-width: 80%;
				word-break: break-all;
				word-wrap: break-word;
			}*/
			/*对话框符号*/

			/*.aui-chat .aui-chat-left .aui-chat-arrow {
				background-image: -webkit-linear-gradient(45deg, #FFFFFF, #FFFFFF 50%, transparent 50%);
				background-image: linear-gradient(45deg, #FFFFFF, #FFFFFF 50%, transparent 50%);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				left: -0.25rem;
			}

			.aui-chat .aui-chat-right .aui-chat-arrow {
				background-image: -webkit-linear-gradient(45deg, #0A5AFA, #0A5AFA 50%, transparent 50%);
				background-image: linear-gradient(45deg, #0A5AFA, #0A5AFA 50%, transparent 50%);
				-webkit-transform: rotate(-135deg);
				transform: rotate(-135deg);
				right: -0.25rem;
			}*/
		</style>
	</head>

	<body>
		<div class="Zhangice">
			<section class="aui-chat">
				<div class="list-date">
					<span class="list-date-msg">星期五 10:26</span>
				</div>
				<div class="aui-chat-item aui-chat-left">
					<div class="aui-chat-media">
						<img src="../image/icon/KEFU@2x.png" />
					</div>
					<div class="aui-chat-inner">

						<div class="aui-chat-content custom-2">
							<div class="aui-chat-arrow"></div>
							您好！我是客服小车侠，很高兴为您服务。请点击一下业务或直接向我提问，如“我的订单”“我的VIP”等。<br /> 1.
							<a>我的订单</a><br /> 2.
							<a>如何退款</a><br /> 3.
							<a>我的VIP</a><br /> 4.
							<a>人工服务</a>
						</div>

					</div>
				</div>
				<div class="aui-chat-item aui-chat-right">
					<div class="aui-chat-media">
						<img src="../image/icon/kehutx@2x.png" />
					</div>
					<div class="aui-chat-inner">
						<!--<div class="aui-chat-name">流浪男</div>-->
						<div class="aui-chat-content" style="color: white;">
							<div class="aui-chat-arrow"></div>
							如何退款
						</div>
					</div>

			</section>
			</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/public-head.js"></script>
	<script type="text/javascript" src="../script/mui.js"></script>
	<script type="text/javascript" src="../script/aui-slide.js"></script>
	<script type="text/javascript" src="../script/aui-tab.js"></script>
	<script type="text/javascript" src="../script/rem.js"></script>

	<script type="text/javascript">
		headInner({
			title: "车车侠客服",
			//headleft
			headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
			//headright
			headr: '<a style="color:white"></a>',
			color: "", //默认是蓝色
			padding: "0px 0px 0px",
		})
		//聊天框
		apiready = function () {
			var UIChatBox = api.require('UIChatBox');
			UIChatBox.open({
			    placeholder: '请输入新消息',
			    maxRows: 4,
			    emotionPath: 'widget://image/emotion',
			    texts: {
			        recordBtn: {
			            normalTitle: '按住说话',
			            activeTitle: '松开结束'
			        },
			        sendBtn: {
			            title: 'send'    //发送
			        }
			    },
					//样式
			    styles: {
						//输入区域样式
			        inputBar: {
			            borderColor: '#d9d9d9',
			            bgColor: '#f2f2f2'
			        },
							//输入框样式
			        inputBox: {
			            borderColor: '#B3B3B3',
			            bgColor: '#FFFFFF'
			        },
							//表情
			        emotionBtn: {
			            normalImg: ''
			        },
							//附加按钮样式
			        extrasBtn: {
			            normalImg: ''
			        },
							//键盘按钮样式
			        keyboardBtn: {
			            normalImg: ''
			        },
							//输入框左侧按钮样式
			        speechBtn: {
			            normalImg: ''
			        },
			        recordBtn: {
			            normalBg: '#c4c4c4',
			            activeBg: '#999999',
			            color: '#000',
			            size: 14
			        },
			        indicator: {
			            target: 'both',
			            color: '#c4c4c4',
			            activeColor: '#9e9e9e'
			        },
			        sendBtn: {
			            titleColor: '#4cc518',
			            bg: '#999999',
			            activeBg: '#46a91e',
			            titleSize: 14
			        }
			    },
			    extras: {
			        titleSize: 10,
			        titleColor: '#a3a3a3',
			        btns: [{
			            title: '图片',
			            normalImg: 'widget://image/chatBox_album1.png',
			            activeImg: 'widget://img/chatBox_album2.png'
			        }, {
			            title: '拍照',
			            normalImg: 'widget://res/img/chatBox_cam1.png',
			            activeImg: 'widget://res/img/chatBox_cam2.png'
			        }]
			    }
			},
			function(ret, err) {
			    if (ret) {
			        alert(JSON.stringify(ret));
			    } else {
			        alert(JSON.stringify(err));
			    }
			});
			//监听 recordBtn 按钮
			// var UIChatInput = api.require('UIChatInput');
			// UIChatInput.addEventListener({
			// 	target: 'recordBtn',
			// 	name: 'press'
			// }, function(ret, err) {
			// 	if(ret) {
			// 		alert(JSON.stringify(ret));
			// 	} else {
			// 		alert(JSON.stringify(err));
			// 	}
			// });

			//监听 inputBar
			// var UIChatInput = api.require('UIChatInput');
			// UIChatInput.addEventListener({
			// 	target: 'inputBar',
			// 	name: 'move'
			// }, function(ret, err) {
			// 	if(ret) {
			// 		alert(JSON.stringify(ret));
			// 	} else {
			// 		alert(JSON.stringify(err));
			// 	}
			// });
		}

		function MessageCenter() {
			api.openWin({
				name: 'MessageCenter',
				url: '../html/MessageCenter.html'
			});
		}

		function customer_feedback() {
			api.openWin({
				name: 'customer-service-feedback',
				url: '../html/customer-service-feedback.html'
			});
		}


	</script>

</html>
